Step 5 - Create the content for the Media page

In this step of the tutorial you create the content for the Media page to show a list of albums in a list box. You first create a prefab template for an album item and then create a Trajectory List Box 3D node to enable users to browse the album items in the Media section of your application.

Create the prefab for the Media page items

In this section you create a prefab that defines the template for the items shown in the Media page.

To create the prefab for the Media page items:

  1. In the Prefabs create a Plane prefab, name it Item, and in the Properties set the Height property to 5.
  2. In the Prefabs double-click the Item prefab to open it in its own Preview tab, and in the Item prefab you created in the previous step, create these nodes:
  3. In the Prefabs select the Item > Album node and in the Properties add and set:
  4. In the Prefabs select the Item > Shadow node and in the Properties add and set:
  5. In the Prefabs select the Item > Description node and in the Properties add and set:

Create and set a Trajectory List Box 3D node and add items to it

In this section you create a Trajectory List Box 3D node that allows the users to scroll the media library content.

  1. Click the Screen tab under the main menu to show the entire application in the Preview.
  2. In the Project > RootPage drag the Viewport 2D node which is below the Media Page node to the Media Page node and create a Trajectory List Box 3D node inside the Scene node.
    Use the Trajectory List Box 3D node to create scrollable lists of items arranged along a trajectory. Kanzi Studio creates and uses a circle trajectory by default. You can use an angle, arc, circle, ellipse, line, rectangle, spiral, spline, or a trapezoid trajectory. See Trajectories.
  3. In the Project double-click the Media Page node to open it in its own Preview tab, and from the Prefabs drag several Item prefabs to the Trajectory List Box 3D node that you created in the previous step.
    In this tutorial and when creating a prototype you can add items to the Trajectory List Box 3D node manually by instantiating them in Kanzi Studio. When the number of items in a List Box node changes while the application is running, add the items to a List Box node using the Kanzi Engine API.
  4. In the Project select the Trajectory List Box 3D node and in the Preview use the Node tool to rotate and position the Trajectory List Box 3D node in the center of the Media Page node.
  5. Create and adjust the lights:
    1. In the Project select the Media > Viewport 2D > Scene > Directional Light node and in the Properties set the Layout Transformation property fields Rotation X and Rotation Y to 0.
    2. In the Project in the Scene node create a Point Light node and in the Preview use the Node tool to move the Point Light in front of the front item in the Trajectory List Box 3D.
  6. In the Project in the Trajectory List Box 3D node select each instance of the Item prefab and in the Properties add and set:
    1. FirstApplication.Item.Texture to one of the Album textures.
    2. FirstApplication.Item.Text to the description of the that album.
  7. Click the Screen tab under the main menu to show the entire application in the Preview.


< PREVIOUS STEP
NEXT STEP >

See also

To find out more about working with the Trajectory List Box 3D, see Using the Trajectory List Box 3D node.

To find out more about the types of trajectories you can use, see Trajectories.